<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        img{
            width:100px;
            height:100px;
        }
    </style>
</head>
<body>
<img id="simg" src="/static/w2/day3/images/car.png" alt="xxx">
<p>这是美女描述</p>
<a class="link" href="#">美女1</a>
<a class="link" href="#">美女2</a>
<a class="link" href="#">美女3</a>

<button id="btn">按钮</button>

<script>
    //获取id是btn的按钮
    let btn=document.querySelector('#btn');

    //事件机制
    btn.onclick=function () {

        //找到img标签，更改src属性
        let simg=document.querySelector('#simg');
        //更改对象的属性
        simg.src='/static/w2/day3/images/face.webp';
        simg.title='我是美女';

        /*修改css属性,使之称为一个背景图片*/
        simg.style.position='absolute'
        simg.style.zIndex=-1
        console.log(simg.id+simg.alt);
       /* let link=document.querySelector('.link');
        link.href='http:google.com';
        console.log(link.href);*/

    }
</script>
</body>
</html>